<template>
	<div class="postNewsTwo">
		<Row :gutter="16">
			<i-form :model="formItem" :label-width="150" >
				<i-col span="5">
					<Form-item label="选择时间：">
						<Date-picker type="daterange" placement="bottom-start" placeholder="选择日期" v-model="formItem.timeFrame" @on-change="changetime"></Date-picker>
					</Form-item>
				</i-col>
				<i-col span="5">
					<Form-item label="选择标签：" >
						<i-select v-model="formItem.tab" @on-change="changetab">
							<i-option v-for="taba in tabs" :value="taba.value">{{ taba.label }}</i-option>
						</i-select>
					</Form-item>
				</i-col>
			</i-form>
		</Row>
		<Row :gutter="16">
			<i-table border :content="self" :columns="columns" :data="data"></i-table>
		</Row>
		<Row :gutter="16" class="page">
			<Page :total="dataCount" :page-size="pageSize" @on-change="changepage"></Page>
		</Row>
		<Modal v-model="moda" width="360">
			<p slot="header" style="color:#f60;text-align:center">
				<Icon type="information-circled"></Icon>
				<span>删除确定</span>
			</p>
			<div style="text-align:center">
				<p>删除之后就找不到了。</p>
				<p>你确定删除？</p>
			</div>
			<div slot="footer">
				<Button type="error" size="large" long @click="del">删除</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
export default {

	name: 'postNewsTwo',

	data () {
		return {
			self: this,
			moda:false,
			actrow:'',
			pageno:0,
			formItem:{
				timeFrame:'',
				tab:''
			},
			tabs: [
			{
				value: '心理',
				label: '心理'
			}
			],
			columns: [
			{
				title: '题目',
				key: 'title',
				render: (h, params) => {
					return h('p', [
						h('a',{
							props: {
								// color: 'blue'
							},
							on: {
								click:(ev) => {
									ev.cancelBubble = true;
									this.alter(params.index);
								}
							}
						}, params.row.title)
						]);

				}
			},
			{
				title: '文章编号',
				key: 'id'
			},
			{
				title: '作者',
				key: 'author'
			},
			{
				title: '来源',
				key: 'source'
			},
			{
				title: '发帖日期',
				key: 'updata'
			},
			{
				title: '发帖时间',
				key: 'uptime'
			},
			{
				title: '标签',
				key: 'tabs',
				render: (h, params) => {
					return h('p', [
						h('Tag',{
							props: {
								color: 'green'
							}
						}, params.row.tabs)
						]);

				}
			},
			{
				title: '发帖人',
				key: 'people'
			},
			{
				title: '真实时间',
				key: 'time'
			},
			{
				title: '状态',
				key: 'state',
				render:  (h, params)=>{
					let xx='';
					let yy='';
					if (params.row.state==0) {
						xx='primary'
						yy='未审核'
					}else if(params.row.state==1){
						xx='success'
						yy='审核通过'
					}else if(params.row.state==-1){
						xx='error'
						yy='审核不通过'
					}
					return h('div', [
						h('Button', {
							props: {
								type: xx,
								size: 'small',
							}
						},yy)
						]);
				},
			},
			{
				title: '操作',
				key: 'action',
				width: 150,
				align: 'center',
				render:  (h, params)=>{
					return h('div', [
						h('Button', {
							props: {
								type: 'error',
								size: 'small',
								disabled:this.data[params.index].isalter
							},
							on: {
								click: () => {
									// this.remove(params.index);
									this.moda = true;
									this.actrow=params.index
								}
							}
						}, '删除')
						]);
				},
			},
			],
			dataCount:0,
			data: [],
			pageSize:10,
			alldata:[
			{	
				title: '心理人',
				id: 'k123',
				author: '佚名',
				updata:'2015-2-15',
				uptime: '20:10:16',
				tabs:'心理',
				source:'知乎',
				people:'邢力',
				time:'2017.11.5 20:10',
				state:0,
				content:'<p>啊啊啊</p>',
				isalter:false
			},
			{	
				title: '心理人',
				id: 'k143',
				author: '佚名',
				updata:'2015-2-15',
				uptime: '20:10:13',
				tabs:'心理',
				source:'知乎',
				people:'邢力',
				time:'2017.11.5 20:10',
				state:1,
				content:'<p>啊啊啊</p>',
				isalter:true
			},
			{	
				title: '心理人',
				id: 'k123',
				author: '佚名',
				updata:'2015-2-15',
				uptime: '20:10:16',
				tabs:'心理',
				source:'知乎',
				people:'邢力',
				time:'2017.11.5 20:10',
				state:-1,
				content:'<p>啊啊啊</p>',
				isalter:false
			},
			],

		}
	},
	methods: {
		changetime(index){
			console.log(index)
			// console.log(this.formItem.timeFrame)
		},
		changetab(index){
			console.log(index)
		},
		remove (index) {
			this.data.splice(index, 1);
		},
		alter(index){
			// alert(this.data[index].id);
			this.$emit('openalter',[this.data[index]])
		},
		del () {
			this.moda = false;
			this.actrow=(this.pageno*10)+this.actrow;
			// console.log(this.alldata[this.actrow].id);
			this.alldata.splice(this.actrow, 1);
			this.$Message.success('删除成功！');
		},
		changepage(index){
			this.pageno=index-1;
			var datastart = ( index - 1 ) * this.pageSize;
			var dataend = index * this.pageSize;
			if (this.alldata.length<=dataend) {
				dataend=this.alldata.length
			}
			this.data = this.alldata.slice(datastart,dataend);
		},
		getdata(){
			this.dataCount=this.alldata.length;
			if (this.alldata.length<=this.pageSize) {
				this.data=this.alldata
			}else{
				this.data=this.alldata.slice(0,this.pageSize);
			}
		}
	},
	created(){
		this.getdata();
	}
}
</script>

<style lang="css" scoped>
.postNewsTwo{
	width: 100%;
	height: 100%;
	padding-left: 20px;
	padding-right: 20px
}
.postNewsTwo .page{
	padding-top: 20px;
	padding-right: 20px;
	text-align: right;
}
</style>